<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/gameGift'}">游戏列表</el-breadcrumb-item>
            <el-breadcrumb-item>礼包</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="content">
            <div class="content-top">
                <el-row :gutter="10">
                    <el-col :xs="12" :sm="12" :md="3">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option key='0' label="请选择" value="0"></el-option>
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :xs="12" :sm="12" :md="5">
                        <el-input v-model="gameName" placeholder="请输入游戏名字或id"></el-input>
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="2">
                        <el-button type="primary" @click="search">搜索</el-button>
                    </el-col>
                </el-row>
            </div>
            <div class="content-table">
                <el-table
                    tooltip-effect="dark"
                    style="width: 100%"
                    :data='searchResult.slice((currentPage-1)*pagesize,currentPage*pagesize)'
                   >
                    <el-table-column
                    prop="id"
                    label="ID"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="游戏名称"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="giftName"
                    label="礼包名称"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                    prop="giftType"
                    label="礼包类型"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                    prop="number"
                    label="库存数量"
                    show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                        </el-table-column>
                </el-table>
            </div>
            <div class="block">
                <el-pagination
                :current-page.sync="currentPage"
                :page-size="pagesize"
                background
                layout="prev, pager, next"
                :total="searchResult.length">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'gameGift',
        data(){
            return{
                value:'',
                gameName:'',
                searchResult:[],
                currentPage:1,
                pagesize:5,
                options: [{
                    value: '001',
                    label: 'B游汇'
                    }, {
                    value: '002',
                    label: '大话儒道'
                    }, {
                    value: '003',
                    label: '梦幻三国'
                    }, {
                    value: '004',
                    label: '口袋火影'
                    }, {
                    value: '005',
                    label: '大话三国'
                },{
                    value: '006',
                    label: '美女大作战'
                },{
                    value: '007',
                    label: '数码宝贝'
                }],
                tableData: [{
                id: '001',
                name: 'B游汇',
                giftName: '《B游汇》新人礼包',
                giftType:'公会礼包',
                number:'99999'
                }, {
                id: '002',
                name: '大话儒道',
                giftName: '《大话儒道》新人礼包',
                giftType:'公会礼包',
                number:'99999'
                }, {
                id: '003',
                name: '梦幻三国',
                giftName: '《梦幻三国》新人礼包',
                giftType:'公会礼包',
                 number:'99999'
                }, {
                id: '004',
                name: '口袋火影',
                giftName: '《口袋火影》新人礼包',
                giftType:'公会礼包',
                number:'99999'
                }, {
                id: '005',
                name: '大话三国',
                giftName: '《大话三国》新人礼包',
                giftType:'公会礼包',
                 number:'99999'
                }, {
                id: '006',
                name: '美女大作战',
                giftName: '《美女大作战》新人礼包',
                giftType:'公会礼包',
                 number:'99999'
                }, {
                id: '007',
                name: '数码宝贝',
                giftName: '《数码宝贝》新人礼包',
                giftType:'公会礼包',
                 number:'99999'
                },{id: '001',
                name: 'B游汇',
                giftName: '《B游汇》新人礼包',
                giftType:'公会礼包',
                number:'99999'
                }, {
                id: '002',
                name: '大话儒道',
                giftName: '《大话儒道》新人礼包',
                giftType:'公会礼包',
                number:'99999'
                }, {
                id: '003',
                name: '梦幻三国',
                giftName: '《梦幻三国》新人礼包',
                giftType:'公会礼包',
                 number:'99999'
                }, {
                id: '004',
                name: '口袋火影',
                giftName: '《口袋火影》新人礼包',
                giftType:'公会礼包',
                number:'99999'
                }, {
                id: '005',
                name: '大话三国',
                giftName: '《大话三国》新人礼包',
                giftType:'公会礼包',
                 number:'99999'
                }, {
                id: '006',
                name: '美女大作战',
                giftName: '《美女大作战》新人礼包',
                giftType:'公会礼包',
                 number:'99999'
                }, {
                id: '007',
                name: '数码宝贝',
                giftName: '《数码宝贝》新人礼包',
                giftType:'公会礼包',
                 number:'99999'
                }],
                multipleSelection: []
            }
        },
        created(){
            this.searchResult=this.tableData;
        },
        methods:{
            // toggleSelection(rows) {
            //     if (rows) {
            //     rows.forEach(row => {
            //         this.$refs.multipleTable.toggleRowSelection(row);
            //     });
            //     } else {
            //     this.$refs.multipleTable.clearSelection();
            //     }
            // },
            // handleSelectionChange(val) {
            //     this.multipleSelection = val;
            // }
            search(){
               this.searchResult=[];
               if(this.value==0){
                  this.searchResult=this.tableData;
                  return
               }
                this.tableData.forEach(element => {
                   if(element.id==this.value){
                       this.searchResult.push(element);
                   }
                });
            },
            handleDelete(index,row){
                this.$confirm('确认删除此条开服表？')
                .then(_ => {
                     this.searchResult.splice(index,1);
                })
                .catch(_ => {});     
            }
        }
    }
</script>

<style scoped>
    .el-breadcrumb{
        padding:0 20px;
        height:80px;
        line-height:80px;
        background:#fff;
    }
    .content-top{
        margin-top:50px;
        padding:30px 20px;
        background: #fff;
        text-align:left;
    }
    th{
        text-align: center;
    }
    .el-table th,.el-table th>.cell{
        text-align: center;
    }
    .block{
        margin-top:60px;
    }
</style>